<template>
  <div class="full-box">
    <el-row class="row1">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a>配货出库</a></el-breadcrumb-item>
        <el-breadcrumb-item>整装配送</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row class="box-head">
      <el-steps class="steps" :active=data.active finish-status="success" simple>
        <el-step title="整装配送单"/>
        <el-step title="装配"/>
        <el-step title="完成装配"/>
      </el-steps>
      <div>
        <el-text class="head-text" tag="b">整装配货单详情</el-text>
        <el-text class="head-text2" tag="b">[配货中]</el-text>
        <el-button-group class="head-button">
          <el-button type="success" class="button1" @click="btnReturn">
            返回
          </el-button>
          <el-button type="success" class="button3" @click="updateActive" :disabled=data.disabled2>
            确认装配信息
          </el-button>
          <el-button type="warning" class="button2" @click="btnSuccess" :disabled=data.disabled3>
            完成配货
          </el-button>
        </el-button-group>
      </div>
    </el-row>
    <el-row>
      <el-card class="card1">
        <div class="card-header1">
          <span class="span1">基本信息</span>
        </div>
        <el-row v-for="item in data.info">
          <el-col :span="8">
            <el-row>
              <el-text class="text1">
                配货单编号: {{ item.orderId }}
              </el-text>
            </el-row>
            <el-row>
              <el-text class="text1">
                配货人: {{ item.loader }}
              </el-text>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-text class="text1">
                客户名称: {{ item.client }}
              </el-text>
            </el-row>
            <el-row>
              <el-text class="text1">
                创建时间: {{ item.creTime }}
              </el-text>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-text class="text1">
                收货地址: {{ item.address }}
              </el-text>
            </el-row>
            <el-row>
              <el-text class="text1">
                最后更新时间: {{ item.endTime }}
              </el-text>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
    <el-row>
      <el-card class="card2">
        <div class="card-header1">
          <span class="span1">配货产品明细</span>
        </div>
        <el-row>
          <el-table :data="data.list" height="300">
            <el-table-column type="index" label="序号" width="80px"></el-table-column>
            <el-table-column prop="nickName" label="通用名" show-overflow-tooltip></el-table-column>
            <el-table-column prop="productName" label="商品名" show-overflow-tooltip></el-table-column>
            <el-table-column prop="unit" label="包装规格" show-overflow-tooltip></el-table-column>
            <el-table-column prop="suppliers" label="生产厂家" show-overflow-tooltip></el-table-column>
            <el-table-column prop="classs" label="产品批号"></el-table-column>
            <el-table-column prop="quantity" label="订单数量"></el-table-column>
            <el-table-column prop="finishQuantity" label="已配货数量"></el-table-column>
            <el-table-column label="未配货数量">
              <template #default="scope">
                {{ scope.row.quantity - scope.row.finishQuantity }}
              </template>
            </el-table-column>
            <el-table-column prop="stockCount" label="库存"></el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import {reactive, ref, onMounted} from "vue";
import router from "@/router";
import moment from "moment";
import {ElMessage} from "element-plus";


const data = reactive({
  info: [],
  key: "",
  list: [],
  active: 1,
  orderDetails: {
    orderId: "",
    productId: "",
    finishQuantity: ""
  },
  disabled2: false,
  disabled3: true
})


//初始化上方信息
let initInfo = () => {
  axios({
    url: "http://localhost:8080/loading/selectByOrderId",
    method: "get",
    params: {
      orderId: data.key
    }
  }).then((res) => {
    data.info = res.data.data;
  })
}
let initList = () => {
  axios({
    url: "http://localhost:8080/loadingDetails/selectByOrderId",
    method: "get",
    params: {
      orderId: data.key
    }
  }).then((res) => {
    data.list = res.data.data;
  })
}
onMounted(() => {
  getOrderId();
  initInfo();
  initList();
})
// 读取并显示 sessionStorage 中的数据
const getOrderId = () => {
  const orderId = sessionStorage.getItem("orderId");
  if (orderId) {
    data.key = orderId; // 正确地更新 reactive 对象的属性
    console.log("OrderId：" + orderId); // 打印从 sessionStorage 获取的 orderId
  } else {
    console.log("No orderId found in sessionStorage");
  }
};

//确认配货信息
const btnCertain = async (list: any) => {
  let stock = list.stockCount - (list.quantity - list.finishQuantity);
  let productId = list.productId;
  console.log(stock);
  //updateFinish所需要数据
  data.orderDetails.orderId = data.key;
  // data.orderDetails.productId = list.productId;//不知道啥问题，赋值会错位
  data.orderDetails.finishQuantity = list.quantity;
  //修改库存
  axios({
    url: "http://localhost:8080/product/updateSto",
    method: "post",
    params: {
      productId: productId,
      finishQuantity: stock
    }
  }).then((res) => {
    if (res.data.success) {

      updateFinish(data.orderDetails.orderId, parseInt(list.productId), parseInt(list.quantity));
      initList();
    } else {
      errorMessage(list.productName + "库存不足");
      CertainFinish();
    }
  })
}
//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}

//完成配货
const updateActive = async () => {
  data.active = 2;
  data.disabled2 = true;
  data.disabled3 = false;
  for (const i in data.list) {
    await btnCertain(data.list[i]);
  }
  initList();
}
//确认全部配货
const CertainFinish = () => {
  data.active = 1;
  data.disabled2 = false;
  data.disabled3 = true;
}

//修改剩余
const updateFinish = (orderId: string, productId: number, finishQuantity: number) => {
  axios({
    url: "http://localhost:8080/OrderDetails/updateFinish",
    method: "post",
    params: {
      orderId: orderId,
      productId: productId,
      finishQuantity: finishQuantity
    }
  }).then((res) => {
    if (res.data.success) {
      initList();
    } else {
      errorMessage("剩余有误");
    }
  })
}

//更新最后操作时间
const updateDeliverTime = () => {
  axios({
    url: "http://localhost:8080/Order/updateEndTime",
    method: "post",
    params: {
      orderId: data.orderDetails.orderId,
      deliverTime: moment(new Date()).format(' YYYY-MM-DD HH:mm:ss')
    }
  })
}

//返回
const btnReturn = () => {
  // axios({
  //   url: "http://localhost:8080/loading2/updateByOrderId",
  //   method: "post",
  //   params: {
  //     orderId: data.key,
  //     loader: ""
  //   }
  // }).then((res) => {
  //   if (res.data.success) {
  //
  //   } else {
  //     errorMessage("输入有误");
  //   }
  // })
  router.push("/loading/fullFront");
}

//配货结束
const btnSuccess = () => {
  axios({
    url: "http://localhost:8080/deliverOrder/setStatus32",
    method: "post",
    params: {
      orderId: data.key
    }
  }).then((res) => {
    if (res.data) {
      successMessage("装配结束");
      updateDeliverTime();
      data.active = 3;
      data.disabled3 = true;//禁用按钮
      router.push("/carStock")
    } else {
      errorMessage("输入有误");
    }
  })
}


</script>

<style scoped>
.full-box {
  margin: 15px;
  width: 100%;
  height: 100vh;
}

.head-text {
  font-size: 20px;

}

.head-text2 {
  font-size: 20px;
  color: #CB871E;
}

.box-head {
  /*border: 1px solid;*/
  width: 100%;
  height: 150px;
}

.head-button {
  margin-top: 5px;
  margin-left: 650px;
}

.card1 {
  width: 1220px;
  height: 135px;
}

.card-header1 {
  height: 30px;
  background: #efedcb;
  line-height: 30px;
}

.span1 {
  color: #CB871E;
  margin-left: 10px;
}

.text1 {
  margin: 8px;
}

.card2 {
  width: 1220px;
  height: 380px;
  margin-top: 10px;
}

.button1 {
  border-radius: 15px 15px;
  width: 90px;
}

.button3 {
  width: 150px;
}

.button2 {
  width: 90px;
  border-radius: 0px 15px 15px 0px;
}

.steps {
  width: 1000px;
  height: 5px;
  border: 1px solid;
  border-color: #cca610;
  border-radius: 20px;
  margin-top: 30px;
}
</style>